<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        div {
            background-color: green;
            color: white;
            padding: 25px;
            text-align: center;
            margin: auto;
            width: 200px;
        }

        div:hover {
            background-color: blue;
        }

        p i:first-child {
            color: blue;
        }
    </style>
</head>
<body>
<!--悬停-->
<div>悬停变色</div>
<!--选择器匹配所有 <p> 元素中的第一个 <i> 元素：-->
<p>breaking<i>&nbsp;popping</i>&nbsp;hiphop<i>&nbsp;locking</i></p>
<p>breaking&nbsp;<i>popping</i>&nbsp;hiphop&nbsp;<i>locking</i></p>

</body>
</html>